<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房产网站管理员端</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>

<body class="bg-gray-100">
<!-- 顶部导航栏 -->
<header class="bg-blue-600 p-4 text-white">
    <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-2xl">房产网站管理员端</h1>
        <a href="#" class="text-white hover:text-gray-200">退出登录</a>
    </div>
</header>

<!-- 侧边栏导航 -->
<div class="flex">
    <nav class="bg-white w-64 p-4 shadow-md">
        <ul>
            <li class="mb-2">
                <a href="#" class="block text-gray-700 hover:text-blue-600" onclick="loadUsers()">
                    <i class="fa-solid fa-user mr-2"></i> 用户管理
                </a>
            </li>
            <li class="mb-2">
                <a href="#" class="block text-gray-700 hover:text-blue-600" onclick="loadListings()">
                    <i class="fa-solid fa-house mr-2"></i> 房源管理
                </a>
            </li>
            <li class="mb-2">
                <a href="#" class="block text-gray-700 hover:text-blue-600">
                    <i class="fa-solid fa-comment mr-2"></i> 评论管理
                </a>
            </li>
            <li class="mb-2">
                <a href="#" class="block text-gray-700 hover:text-blue-600">
                    <i class="fa-solid fa-chart-bar mr-2"></i> 数据统计
                </a>
            </li>
        </ul>
    </nav>

    <!-- 主内容区域 -->
    <main class="flex-1 p-4">
        <!-- 用户管理区域 -->
        <section id="user-management" class="mb-8">
            <h2 class="text-2xl text-gray-700 mb-4">用户管理</h2>
            <table class="w-full border-collapse border border-gray-300">
                <thead>
                <tr>
                    <th class="border border-gray-300 p-2">用户 ID</th>
                    <th class="border border-gray-300 p-2">用户名</th>
                    <th class="border border-gray-300 p-2">邮箱</th>
                    <th class="border border-gray-300 p-2">注册时间</th>
                    <th class="border border-gray-300 p-2">操作</th>
                </tr>
                </thead>
                <tbody id="user-table-body">
                </tbody>
            </table>
        </section>

        <!-- 房源管理区域 -->
        <section id="listing-management" class="mb-8">
            <h2 class="text-2xl text-gray-700 mb-4">房源管理</h2>
            <table class="w-full border-collapse border border-gray-300">
                <thead>
                <tr>
                    <th class="border border-gray-300 p-2">房源 ID</th>
                    <th class="border border-gray-300 p-2">房源标题</th>
                    <th class="border border-gray-300 p-2">发布时间</th>
                    <th class="border border-gray-300 p-2">状态</th>
                    <th class="border border-gray-300 p-2">操作</th>
                </tr>
                </thead>
                <tbody id="listing-table-body">
                </tbody>
            </table>
        </section>
    </main>
</div>

<script>
    async function loadUsers() {
        try {
            const response = await fetch('http://your-backend-url/yonghuxinxi/getAllUsers');
            const data = await response.json();
            const userTableBody = document.getElementById('user-table-body');
            userTableBody.innerHTML = '';
            data.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                        <td class="border border-gray-300 p-2">${user.id}</td>
                        <td class="border border-gray-300 p-2">${user.username}</td>
                        <td class="border border-gray-300 p-2">${user.email}</td>
                        <td class="border border-gray-300 p-2">${user.registerTime}</td>
                        <td class="border border-gray-300 p-2">
                            <button class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">封禁</button>
                        </td>
                    `;
                userTableBody.appendChild(row);
            });
        } catch (error) {
            console.error('获取用户数据失败:', error);
        }
    }

    async function loadListings() {
        try {
            const response = await fetch('http://your-backend-url/listing/getAllListings');
            const data = await response.json();
            const listingTableBody = document.getElementById('listing-table-body');
            listingTableBody.innerHTML = '';
            data.forEach(listing => {
                const row = document.createElement('tr');
                row.innerHTML = `
                        <td class="border border-gray-300 p-2">${listing.id}</td>
                        <td class="border border-gray-300 p-2">${listing.title}</td>
                        <td class="border border-gray-300 p-2">${listing.publishTime}</td>
                        <td class="border border-gray-300 p-2">${listing.status}</td>
                        <td class="border border-gray-300 p-2">
                            <button class="bg-yellow-500 text-white px-2 py-1 rounded hover:bg-yellow-600">下架</button>
                        </td>
                    `;
                listingTableBody.appendChild(row);
            });
        } catch (error) {
            console.error('获取房源数据失败:', error);
        }
    }
</script>
</body>

</html>
